import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/server/api/user_api.dart';
import 'package:ball_lion/server/http/dio_utils.dart';
import 'package:ball_lion/utils/toast_utils.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_button.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';

class LoginSafetyViewView extends StatefulWidget {
  const LoginSafetyViewView({super.key});

  @override
  State<LoginSafetyViewView> createState() => _LoginSafetyViewViewState();
}

class _LoginSafetyViewViewState extends State<LoginSafetyViewView> {
  var _key = Utils.getRandomString(20);
  final _controller = TextEditingController();
  bool showErrorMessage = false;

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: SizedBox(
        // padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        width: 300,
        // height: 240,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 24),
            const Center(
                child: QsText(
              '安全验证',
              fontSize: 16,
              fontWeight: FontWeight.w500,
            )),
            const SizedBox(height: 16),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                const SizedBox(width: 16),
                Expanded(
                  child: SizedBox(
                    height: 43,
                    child: TextField(
                      controller: _controller,
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                          // fillColor: Colours.greyEE,
                          // filled: true,
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(4),
                              borderSide: const BorderSide(
                                  color: Colours.grey99, width: 1)),
                          focusedBorder: const OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colours.grey99, width: 1)),
                          focusColor: Colours.grey99,
                          contentPadding: const EdgeInsets.symmetric(
                              horizontal: 16, vertical: 2),
                          hintText: "请输入图中验证码",
                          hintStyle: const TextStyle(fontSize: 13)),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                GestureDetector(
                  onTap: () => refreshCode(),
                  child: Image.network(
                    '${DioUtils.baseUrl}resource/app-do/kaptcha?key=$_key',
                    width: 89,
                    height: 43,
                    fit: BoxFit.fill,
                  ),
                ),
                const SizedBox(width: 16),
              ],
            ),
            const SizedBox(height: 2),
            body(),
            const SizedBox(height: 16),
            Container(
              width: double.infinity,
              height: 0.5,
              color: Colours.greyEE,
            ),
            bottom()
          ],
        ),
      ),
    );
  }

  body() {
    return Row(
      children: [
        const SizedBox(width: 16),
        Visibility(
            visible: showErrorMessage,
            maintainSize: true,
            maintainAnimation: true,
            maintainState: true,
            child: const QsText('验证码错误', color: Colours.R6, fontSize: 12)),
        const Spacer(),
        SizedBox(
          height: 17,
          // width: 40,
          child: GestureDetector(
            onTap: () {
              refreshCode();
            },
            child: const QsText('换一张', fontSize: 12, color: Colours.grey66),
          ),
        ),
        const SizedBox(width: 16),
      ],
    );
  }

  bottom() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Flexible(
          fit: FlexFit.tight,
          child: QsButton(
              onPressed: () => Get.back(),
              text: '取消',
              height: 44,
              textStyle: const TextStyle(fontWeight: FontWeight.w500),
              foregroundColor: Colours.grey66),
        ),
        Container(
          width: 0.5,
          height: 44,
          color: Colours.greyEE,
        ),
        Flexible(
          fit: FlexFit.tight,
          child: QsButton(
              onPressed: () => checkCode(),
              text: '确定',
              height: 44,
              textStyle: const TextStyle(fontWeight: FontWeight.w500),
              foregroundColor: Colours.main),
        ),
      ],
    );
  }

  void refreshCode() {
    setState(() {
      _key = Utils.getRandomString(20);
    });
  }

  void checkCode() async {
    // dev.log(_controller.text);
    // print(_code.toString);
    if (_controller.text.isEmpty) {
      Toast.text('请输入验证码');
    } else {
      final result = await UserApi.loginSafetyValidate(_controller.text, _key);
      if (result == 200) {
        Get.back(result: true);
      } else {
        refreshCode();
        _controller.text = '';
        setState(() {
          showErrorMessage = true;
        });
      }
    }
  }
}
